<template>
  <div class="login">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="returnMy ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">账号登录/注册</div>
      <div class="van-nav-bar-right"
           @click="returnShoye">先逛一逛

      </div>
    </div>

    <div class="banner">
      <img class="auto-img"
           src="../assets/ruixing_a.png"
           alt="">
    </div>

    <div class="login-box">
      <!-- 登录 -->
      <van-form>
        <van-field v-model="loginInfo.phone"
                   name="手机号"
                   label="手机号"
                   placeholder="请输入手机号"
                   autocomplete="off" />
        <van-field v-model="loginInfo.password"
                   :type="!LoginPassword ? 'password' : 'text'"
                   name="密码"
                   label="密码"
                   :right-icon="!LoginPassword ? 'closed-eye' : 'eye-o'"
                   @click-right-icon="SwitchPasswordVisible"
                   autocomplete="off"
                   placeholder="请输入密码" />

        <div class="forgotPassword"
             @click="forgotPassword">忘记密码？</div>

        <div style="margin: 16px;">

          <div class="login-item">
            <van-button round
                        block
                        color="#0C34BA"
                        @click="login">登录</van-button>
          </div>
          <div class="registered-item">
            <van-button round
                        block
                        type="default"
                        @click="showbottom">注册</van-button>
          </div>
        </div>
      </van-form>
    </div>

    <!-- 注册 -->
    <van-popup v-model="show"
               closeable
               position="bottom"
               :style="{ height: '43%' }">

      <div class="register-box">

        <div class="register-title">账户注册</div>

        <van-form>
          <van-field v-model="registerInfo.nickName"
                     type="text"
                     name="用户名"
                     label="用户名"
                     autocomplete="off"
                     placeholder="请输入用户名" />

          <van-field v-model="registerInfo.phone"
                     name="手机号"
                     label="手机号"
                     placeholder="请输入手机号"
                     autocomplete="off" />

          <van-field v-model="registerInfo.password"
                     :type="!RegisterPassword ? 'password' : 'text'"
                     name="密码"
                     label="密码"
                     :right-icon="!RegisterPassword ? 'closed-eye' : 'eye-o'"
                     @click-right-icon="SwitchRegisterPassword"
                     autocomplete="off"
                     placeholder="请输入密码" />

          <div class="register-item">
            <van-button round
                        block
                        color="#0C34BA"
                        @click="register">注册</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      // 点击注册是否弹出注册页
      show: false,

      isLogin: false,

      // 关联登录信息
      loginInfo: {
        phone: '',
        password: ''
      },

      // 注册关联用户信息
      registerInfo: {
        nickName: '',
        phone: '',
        password: ''
      },

      // 登录密码
      LoginPassword: false,

      // 注册密码
      RegisterPassword: false

    };
  },
  mounted () {

  },
  methods: {
    // 返回我的
    returnMy () {
      this.$router.push({ name: 'My' })
    },

    // 忘记密码
    forgotPassword () {
      this.$router.push({ name: 'EmailVerification' })
    },

    // 前往首页
    returnShoye () {
      this.$router.push({ name: 'Shoye' })
    },

    // 切换登录密码状态
    SwitchPasswordVisible () {
      this.LoginPassword = !this.LoginPassword
    },

    //切换注册密码可见状态
    SwitchRegisterPassword () {
      this.RegisterPassword = !this.RegisterPassword
    },

    // 点击注册是否弹窗
    showbottom () {
      this.show = true
    },

    // 注册
    register () {

      if (this.registerInfo.nickName == '' && this.registerInfo.phone == '' && this.registerInfo.password == '') {
        this.$toast('用户名和手机号以及密码不能为空！')
        return
      }

      this.axios({
        method: 'post',
        url: '/register',
        data: {
          ...this.registerInfo
        }
      }).then(result => {

        if (result.data.code == 100) {
          this.$toast.success('注册成功')

          setTimeout(() => {
            this.show = false
            for (let key in this.registerInfo) {
              this.registerInfo[key] = '';
            }
          }, 1000)

        }

        if (result.data.code == 102) {
          this.$toast('手机号已被注册！')

        }
      })
    },

    // 登录
    login () {

      if (this.loginInfo.phone == '' && this.loginInfo.password == '') {
        this.$toast('手机号或者密码不能为空！')

        return
      }

      this.axios({
        method: 'post',
        url: '/login',
        data: {
          ...this.loginInfo
        }
      }).then(result => {
        if (result.data.code == 201) {
          this.$toast("您的手机号还未注册，请先注册！")
        }

        if (result.data.code == 200) {
          this.$toast.success('登录成功')

          localStorage.setItem('token', result.data.token)

          setTimeout(() => {
            this.$router.push({ name: 'Shoye' })
          }, 500)
        }

        if (result.data.code == 202) {
          this.$toast('手机号或者密码不正确！')
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.login {
  .van-nav-bar {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 10px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      margin-left: 10px;
      font-size: 16px;
    }
    .van-nav-bar-right {
      margin-right: 10px;
      font-size: 16px;
    }
  }
  .login-box {
    position: relative;
    .forgotPassword {
      position: fixed;
      right: 5px;
      top: 355px;
    }
  }

  .login-item {
    margin: 60px 0 20px;
  }
  .register-box {
    padding: 10px;
    text-align: center;
    .register-title {
      font-size: 18px;
      margin-bottom: 20px;
    }
  }
}
</style>